<template>
  <div class="bottomRightBar">
    <dv-loading style="color: aqua" v-if="loading">加载中</dv-loading>
    <div ref="app" class="echarts" v-else></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { accessoryType } from "@/api/index";
export default {
  name: "bottomRightBar",
  data() {
    return {
      xdata: "",
      ydata1: [],
      ydata2: [],
      loading: false,
      myChart: "", //存储init后生成的图表全部内容
    };
  },

  methods: {
    //接口请求
    getrequests() {
      accessoryType().then((res) => {
        if (res.code == 200) {
          //   //   this.loading = false;
          //   //   this.xdata = res.data.map((item) => {
          //   //     return item.districtTeam;
          //   //   });
          //   //   this.ydata1 = res.data.map((item) => {
          //   //     return item.assetNumber;
          //   //   });
          //   //   this.ydata2 = res.data.map((item) => {
          //   //     return item.assetNumber;
          //   //   });
        }
      });
      this.$nextTick(() => {
        this.getdata();
      });
    },
    getdata() {
      var myChart = echarts.init(this.$refs.app);
      var option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            color: "#a69ef3",
          },
        },
        series: [
          {
            type: "pie",
            radius: "60%",
            center: ["33%", "70%"],
            data: [
              { value: 1048, name: "大材" },
              { value: 735, name: "专工配件" },
              { value: 580, name: "五小电器" },
            ],
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}",
                textStyle: {
                  color: "#080127",
                  fontSize: 14,
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option, true);
    },
  },
  mounted() {
    this.getrequests();
    // setInterval(() => {
    //   this.getrequests();
    // }, 3600000);
  },
};
</script>
<style scoped>
.echarts {
  width: 320px;
  height: 320px;
}
</style>
